<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        :global(:root){

        }
        :root{
            /* 声明的css全局变量 */
            --size:20px;
            --mycolor:red;
            --van-toast-max-width:50% !important;
        }
        .box{
            /* var() 使用变量 */
            color:var(--mycolor);
            font-size:var(--size);
        }
        :deep(.abc>.xx>.xxx){}
        :deep(.abc .van-toast__text){
            
        }
    </style>
</head>
<body>

    <!-- css  sass  -->
    <!-- html5里面css已经支持变量写法 -->
    <div class="box">
        box
        <van-toast class="abc"></van-toast>
    </div>
</body>
</html>